<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .current {
      background-color: purple;
    }
  </style>
  <script src="jquery.min.js"></script>
</head>

<body>
  <div></div>
  <ul>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
    <li>我们都是好孩子</li>
  </ul>
  <ol>

  </ol>
  <script>
    // 1. 单个事件注册
    // $("div").click(function () {
    //   $(this).css("background", "purple")
    // })

    // $("div").mouseenter(function () {
    //   $(this).css("background", "blue")
    // })

    // jquery 事件绑定处理 事件处理 on 一次性搞定多个事件
    // $("div").on({
    //   mouseenter: function () {
    //     $(this).css("background", "skyblue")
    //   },
    //   click: function () {
    //     $(this).css("background", "purple")
    //   },
    //   mouseleave: function () {
    //     $(this).css("background", "blue")
    //   }
    // })

    // 鼠标经过和离开都会执行这个函数 进行添加类 和 删除类
    $("div").on("mouseenter mouseleave", function () {
      $(this).toggleClass("current")
    })

    // 2. on可以实现 事件委托
    // on(事件方法, "子元素", 函数)
    $("ul").on("click", "li", function () {
      alert(11)
    })
    // click是绑定在ul身上的 但是 触发对象是ul里面的小li

    // (3) on 可以给动态创建的元素绑定事件

    // 这里普通办法是不可以为未来创建的动态元素进行事件委托的
    // $("ol li").click(function () {
    //   alert(11)
    // })

    // 但是on就可以
    $("ol").on("click", "li", function () {
      alert(11)
    })

    // 动态创建一个li
    let li = $("<li>我是后来创建的一个li</li>")
    $("ol").append(li)

  </script>
</body>

</html>